import './evokebutton.scss'
import common from '../BaseComponent/index.js'
class EnhanceButton extends common { 
    constructor(options) { 
        super(options)
        const defaultOptions = {
            mode: 'light',
            element: '',
            color:'red',
            type: '',
            text: '网易新闻',
            url:''
        }
        this.options = Object.assign(defaultOptions, options)
        this.$container = this.options.element
        this.initContent()
    }

    initContent() { 
        // document.createTextNode() 生成的只是一个字符串，没有标签
         const $box = document.createTextNode(this.options.text)
        this.$container.addEventListener('click', () => {
                this.options.callback.call(this)
                this.jump(this.options.url)
        })
        // 判断颜色
        if (this.options.color == 'red') { 
        this.$container.classList.add('evoke-color-red')
        }
        else {
            this.$container.classList.add('evoke-color-blue')
        }
        
        // 判断是否是评论，如果是评论的话，则加上icon
        if (this.options.type == "comment") { 
            this.$container.classList.add('comment-icon')
        }
        this.$container.appendChild($box)
    }
}
export default EnhanceButton